<template>
  <div class="work-publish-data">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="核心数据" name="first">
        <statistics-data
          v-if="this.activeName == 'first'"
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="不同类型作品发布数据" name="second">
        <statistics-data
          v-if="this.activeName == 'second'"
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.workSl"
        ></statistics-data>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import StatisticsData from "@/components/StatisticsData";
import { fieldCover } from "@/utils/field";
export default {
  components: {
    StatisticsData,
  },
  data() {
    return {
      activeName: "first",
      coreData: {},
      xAxis: [],
      yAxis: [],
      series: [],
      legend: [],
      flag: false,
      tableLoadData: [],
      tableHeadConfig: [],
      modelVal: "",
    };
  },
  created() {
    this.handleClick();
  },
  watch: {
    modelVal(newval) {
      var startTime = newval.dataVal[0];
      var endTime = newval.dataVal[1];
      var workType = newval.workType;
      this.handleClick(startTime, endTime, workType.toString());
    },
  },
  methods: {
    async handleClick(startTime, endTime, workType) {
      this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
      this.flag = false;
      this.tableLoadData = [];
      this.tableHeadConfig = [];
      this.legend = [];
      this.xAxis = [];
      this.yAxis = [];
      this.series = [];
      if (this.activeName == "first") {
        await this.$service.StatisWorkPublish().then((res) => {
          this.coreData.data = {};
          this.coreData.data.publishCnt = res.publishCnt;
          this.coreData.data.publishUserCnt = res.userCnt;
          this.coreData.data.publishCvr = res.publishCvr;
          this.coreData.data.publishAvg = res.publishAvg;
        });
        this.$service
          .StatisWorkPublishChart({
            startDate: startTime,
            endDate: endTime,
          })
          .then((res) => {
            this.tableLoadData = [...res.dayData, ...res.otherData];
            this.tableHeadConfig = this.$ENUMS.publishWork;
            this.legend = this.$ENUMS.publishWorkLegend;
            var Cnts = [[], [], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.publishCnt);
              Cnts[1].push(item.userCnt);
              Cnts[2].push(item.publishCvr);
              Cnts[3].push(item.publishAvg);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
                yAxisIndex: index == 2 || index == 3 ? Cnts.length - 1 : null,
              };
              var y = {
                type: "value",
                min: 0,
                position: Cnts.length == index + 1 ? "right" : "left",
              };
              this.yAxis.push(y);
              this.series.push(serie);
            });
            fieldCover(res.otherData, res.dayData);
            this.flag = true;
          })
          .catch((err) => {});
      }
      if (this.activeName == "second") {
        await this.$service.StatisWorkPublishType().then((res) => {
          this.coreData.data = {};
          this.coreData.data.videoPublishCnt = res.videoPublishCnt;
          this.coreData.data.publishVideoUserCnt = res.videoUserCnt;
          this.coreData.data.articlePublishCnt = res.articlePublishCnt;
          this.coreData.data.publishArticleUserCnt = res.articleUserCnt;
          this.coreData.data.picturePublishCnt = res.picturePublishCnt;
          this.coreData.data.publishPictureUserCnt = res.pictureUserCnt;
        });
        this.$service
          .StatisWorkPublishTypeChart({
            startDate: startTime,
            endDate: endTime,
            workTypes: workType != undefined > 0 ? workType : "1, 2, 3",
          })
          .then((res) => {
            fieldCover(res.otherData, res.dayData);
            this.tableLoadData = [...res.dayData, ...res.otherData];
            this.tableHeadConfig = this.$ENUMS.diffPublishWork;
            this.legend = this.$ENUMS.diffPublishWorkLegend;
            var Cnts = [[], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.publishCnt);
              Cnts[1].push(item.userCnt);
              Cnts[2].push(item.publishAvg);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
                yAxisIndex: index == 2 ? Cnts.length - 1 : null,
              };
              var y = {
                type: "value",
                min: 0,
                position: Cnts.length == index + 1 ? "right" : "left",
              };
              this.yAxis.push(y);
              this.series.push(serie);
            });
            this.flag = true;
          })
          .catch((err) => {});
      }
    },
  },
};
</script>
<style lang="less" scoped>
.work-publish-data {
  text-align: left;
}
</style>
